{% extends "olexam/base.html" %}

{% load exam_extras %}

{% block content %}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>{{ exam.title }}</h2>
        <div class="timer" id="timer">剩余时间: 00:00:00</div>
    </div>
    
    <form method="post">
        {% csrf_token %}
        
        {% for question in exam.questions.all %}
            <div class="question-card">
                <h5>问题 {{ forloop.counter }} ({{ question.get_type_display }}) - {{ question.score }}分</h5>
                <p>{{ question.content }}</p>
                
                {% with question_type=question.get_question_type %}
                    {% if question.type == 'true_false' %}
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="question_{{ question.id }}" 
                                   id="q{{ question.id }}_true" value="true"
                                   {% if responses|get_item:question.id == 'true' %}checked{% endif %}>
                            <label class="form-check-label" for="q{{ question.id }}_true">正确</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="question_{{ question.id }}" 
                                   id="q{{ question.id }}_false" value="false"
                                   {% if responses|get_item:question.id == 'false' %}checked{% endif %}>
                            <label class="form-check-label" for="q{{ question.id }}_false">错误</label>
                        </div>
                    
                    {% elif question.type == 'single_choice' %}
                        {% for option in question_type.get_options %}
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="question_{{ question.id }}" 
                                       id="q{{ question.id }}_o{{ forloop.counter }}" value="{{ forloop.counter0 }}"
                                       {% if responses|get_item:question.id == forloop.counter0 %}checked{% endif %}>
                                <label class="form-check-label" for="q{{ question.id }}_o{{ forloop.counter }}">
                                    {{ option }}
                                </label>
                            </div>
                        {% endfor %}
                    
                    {% elif question.type == 'multiple_choice' %}
                        {% for option in question_type.get_options %}
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="question_{{ question.id }}" 
                                       id="q{{ question.id }}_o{{ forloop.counter }}" value="{{ forloop.counter0 }}"
                                       {% if forloop.counter0 in responses|get_item:question.id %}checked{% endif %}>
                                <label class="form-check-label" for="q{{ question.id }}_o{{ forloop.counter }}">
                                    {{ option }}
                                </label>
                            </div>
                        {% endfor %}
                    
                    {% elif question.type == 'programming' %}
                        <textarea class="form-control" name="question_{{ question.id }}" 
                                  rows="10" style="font-family: monospace;">{{ responses|get_item:question.id|default:question_type.template_code }}</textarea>
                    {% endif %}
                {% endwith %}
            </div>
        {% endfor %}
        
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="submit" name="save_progress" class="btn btn-primary me-md-2">保存进度</button>
            <button type="submit" name="submit_exam" class="btn btn-danger">提交考试</button>
        </div>
    </form>
{% endblock %}

{% block scripts %}
    <script>
        // 倒计时功能
        function updateTimer() {
            const remaining = {{ remaining_time }};
            if (remaining <= 0) {
                document.getElementById('timer').textContent = '考试时间已结束';
                document.forms[0].submit(); // 自动提交表单
                return;
            }
            
            const hours = Math.floor(remaining / 3600);
            const minutes = Math.floor((remaining % 3600) / 60);
            const seconds = remaining % 60;
            
            document.getElementById('timer').textContent = `剩余时间: ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // 每秒钟更新一次计时器
        updateTimer();
        setInterval(updateTimer, 1000);
        
        // 离开页面警告
        window.addEventListener('beforeunload', function(e) {
            e.preventDefault();
            e.returnValue = '您确定要离开吗？未保存的更改可能会丢失。';
        });
    </script>
{% endblock %}
